<template lang="pug">
  .keywordlist
    .toolbar
      .breadcrumbs 关键词列表
      .el-button.el-button--danger(type="danger" @click="goadd()") 添加关键词
    table.table
      tr
        th 序号
        th 所属行业
        th 所属单位
        th 关键词
        th 操作
      tr(v-for="(item,index) in keywordlist" :key="index" )
        td {{index+1<10?'0'+(index+1):index+1}}
        td {{item.industryName}}
        td {{item.organizationName }}
        td {{substrUrl(item.keyUrl)}}
        td
          a.download(@click="down(item.id)" ) 下载
          .del(@click="del(item.id)") 删除
    .footer
      .m-pagination
        a(href="javascript:;" @click="gotopage(1)") 首页
        a(href="javascript:;" @click="gotopage(pageNow-1)") <
        a(v-for="(item,index) in pagecount" :key="index" @click="gotopage(item)" :class="{active:index+1==pageNow}" v-show="item-pageNow>=-2&&item-pageNow<3") {{index+1}}
        a(href="javascript:;" @click="gotopage(pageNow+1)") >
        a(href="javascript:;"  @click="gotopage(pagecount.length)") 末页
    add-key(:keyword="isShow")

</template>
<script>
  import addkey from './addkey.vue'

  export default {
    name: 'keywordlist',
    data() {
      return {
        pageNow: 1,
        pageSize: 10,
        keywordlist: [],
        pagecount: [],
        editable: false,
        ruleForm: {
          date: '',
          desc: ''
        },
        rules: {
          desc: [
            {required: true, message: '请输入内容', trigger: 'blur'},
          ],
          date: [
            {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
          ],
        },
        isShow: false
      }
    },
    mounted() {
      this.getkeywordlist()
    },
    components: {
      'add-key': addkey,
    },
    methods: {
      async getkeywordlist() {
        let res = await this.$ajax.get(`xyssoManager/monitorkey/queryAll?pageNow=${this.pageNow}&pageSize=${this.pageSize}`)
        let data = res.data
        if (data.code == 200) {
          this.keywordlist = data.data
          this.total = data.size
          this.pagecount = []
          if (data.pageCount === null) {
            this.pagecount = 1
          } else {
            for(let i=1;i<parseInt(data.pageCount)+1;i++){
              this.pagecount.push(i)
            }
          }
        }
      },
      gotopage(item) {
        if (item > this.pagecount) return
        if (item < 1) return
        this.pageNow = item
        this.getkeywordlist()
      },
      goadd() {
        this.isShow = true
        setTimeout(() => {
          this.isShow = false
        }, 1000)
      },
      edit(id) {
        let $el = document.getElementById(id).getElementsByTagName("td");
        for (let i = 0; i < $el.length; i++) {
          console.log($el[i]);
          $el[i].childNodes[0].style.display = 'none';
          $el[i].childNodes[1].style.display = 'inline-block';
        }
      },
      async del(id) {
        let res = await this.$ajax.post('xyssoManager/monitorkey/delete', {
          id: id
        })
        let data = res.data
        if (data.code == 200) {
          this.keywordlist = this.keywordlist.filter(d => d.id != id)
          console.log('-------'+this.keywordlist)
          this.$message.success('删除成功')
        }
      },
      substrUrl(url){
        return url.substring(url.lastIndexOf('/')+1);
      },
      async down(id){
        window.open(`http://180.97.15.175:8080/xyssoManager/monitorkey/download?id=${id}`)
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .keywordlist
    margin 0 auto
    .toolbar
      width 100%
      height 70px
      line-height 70px
      background #fff
      border-bottom 1px solid #e0e0e0
      .breadcrumbs
        float left
        margin-left 30px
        font-size 18px
      .el-button
        float right
        margin-right 30px
        height 30px
        line-height 30px
        padding 0 15px
        margin-top 20px
        font-size 12px
    .table
      width 100%
      background #fff
      border-spacing 0
      padding 22px 30px 0 30px
      th
        height 40px
        line-height 40px
        font-size 12px
        color #999
        text-align center
        background #f5f5f5
        &:nth-child(1)
          width 20%
        &:nth-child(2)
          width 20%
        &:nth-child(3)
          width 20%
        &:nth-child(4)
          width 20%
        &:nth-child(5)
          width 20%
        &:first-child
          text-align left
          padding-left 20px
        &:last-child
          text-align right
          padding-right 85px
      td
        height 50px
        font-size 14px
        color #686868
        border-bottom 1px solid #eee
        text-align center
        box-sizing border-box
        &:nth-child(1)
          width 20%
        &:nth-child(2)
          width 20%
        &:nth-child(3)
          width 20%
        &:nth-child(4)
          width 20%
        &:nth-child(5)
          width 20%
        &:first-child
          text-align left
          padding-left 26px
        &:last-child
          text-align right
          padding-right 30px
        &.cont
          width 800px
          text-align left
        .del
          display inline-block
          line-height: 50px;
          width 60px
          text-indent 25px
          cursor pointer
          background url('img/del.png') no-repeat
          background-size 14px 14px
          background-position top 18px left 2px
          color #e75a46
          margin-left 20px
        .download
          display inline-block
          line-height: 50px;
          width 60px
          text-indent 25px
          cursor pointer
          background url('img/download.png') no-repeat
          background-size 14px 14px
          background-position top 18px left 2px
          color #38418a
          margin-left 20px
          text-decoration none
    .footer
      margin-top 20px

  .m-pagination
    float right
    font-size 0
    a
      text-decoration none
      display inline-block
      width 32px
      height 32px
      border-radius 5px
      text-align center
      line-height 32px
      margin-right 10px
      font-size 12px
      color #999
      background #fff
      &.active
      &:hover
        background #e75a46
        color #fff
      &:first-of-type
      &:last-of-type
        width 52px

</style>


